<template>
  <body style="width: 100%;overflow-x: hidden;">
		<!--天气-->
		<div class="weather">
			<div class="air_temperature">
				<ul>
					<li><p class="col-w">18</p></li>
					<li><p class="l_font col-w">℃</p></li>
					<li>
						<svg class="icon" aria-hidden="true" style="margin-top: 0.04rem;float: left;">
						  <use xlink:href="#icon-yintian-"></use>
						</svg>
					</li>
					<li>
						<i class="iconfont col-w">&#xe629;</i>
					</li>
				</ul>
			</div>
			<div class="today">
				<p class="col-w">
					今天：晴转多云|11/18℃
				</p>
			</div>
			<div class="tip">
				<p class="col-w">各项气象条件事宜，无明显降温过程，发生感冒几率较低</p>
			</div>
		</div>
		<!--跑马灯-->
	    <a href="Service_reminding.html">
			<div class="horse_race_lamp">
				<ul>
					<li><i class="iconfont col-r">&#xe61d;</i></li>
					<li>
						<ul>
							<li>
								<p>•申请贷款：陈先生申请一笔</p>
							</li>
							<li>
								<p>1天前</p>
							</li>
						</ul>
						<ul>
							<li>
								<p>•合作提醒：王先生报名参与商务合作</p>
							</li>
							<li>
								<p>5小时</p>
							</li>
						</ul>
					</li>
					<li>
						<i class="iconfont col-r">&#xe81d;</i>
					</li>
				</ul>
			</div>
		</a>
		<!--中部导航-->
		<div class="Central_navigation">
			<ul>
				<li><a href="Loan_application.html"><i class="iconfont">&#xe601;</i>
					<p>贷款申请</p></a>
				</li>
				<li><a href="Credit_loan_record.html"><i class="iconfont">&#xe636;</i>
					<p>贷款记录</p></a>
				</li>
				<li><a href="Loan_products.html"><i class="iconfont">&#xe65b;</i>
					<p>贷款产品</p></a>
				</li>
				<li><a href="Recommending.html"><i class="iconfont">&#xe60a;</i>
					<p>推荐好友</p></a>
				</li>
			</ul>
		</div>
		<swiper :list="baseList" loop auto height="100px" dots-position="center" dots-class="custom-bottom"></swiper>
		<!--中部轮播-->
		<div class="swiper-container" style="border-bottom: 1px solid #ccc;">
		    <!--<div class="swiper-wrapper">
		        <div class="swiper-slide box1"><img  src="static/img/b5064d252047488b9cf89933a46f606f.jpg" width="100%"></div>
		        <div class="swiper-slide box2" ><img  src="@/assets/img/81b9bb9ecb2c90e2afbe35e949a5e3a5.jpg" width="100%"></div>
		        <div class="swiper-slide box3"><img   src="@/assets/img/b5064d252047488b9cf89933a46f606f.jpg" width="100%"></div>
		    </div>-->
		     <!--如果需要分页器 -->
		    <!--<div class="swiper-pagination" style="bottom: -0.28rem;"></div>-->
		
		    
		
		    <!-- 如果需要滚动条 -->
		     <!--<div class="swiper-scrollbar"></div>-->
		</div>
		<div class="Recommend">
			<p>为你推荐</p>
			<div class="Recommend_img">
				<ul>
				    <li><a href="Loan_products.html">
				    	    <img src="@/assets/img/b9079a202b3ab4b0cffdb6f8b14a166c.jpg" width="100%" />
				    		<p>为您推荐最合适的产品</p>
				    		</a>
				    </li>
				    <li><a href="Credit_Manager.html">
				    		<img src="@/assets/img/b9079a202b3ab4b0cffdb6f8b14a166c.jpg" width="100%" />
				    		<p>星级信贷经理</p>
				    		</a>
				    </li>
				</ul>
			</div>
		</div>
		<!--资讯-->
		<div class="information">
			<a href="Article.html">
				<ul class="information_title">
					<li><p>2018新金融之路：服务实体经济</p></li>
					<li><p>2018-1-22</p></li>
				</ul>
				<div><img src="@/assets/img/千库网2c3139b9c1aaab8e965d68e1490a5c22.jpg" width="100%" /></div>
			</a>
			<ul class="information_function">
				<li><i class="iconfont">&#xe613;</i><span>分享</span></li>
				<li><i class="iconfont">&#xe7bf;</i><span>评论</span></li>
				<li><i class="iconfont">&#xe647;</i><span>886</span></li>
			</ul>
		</div>
		<div class="information">
			<a href="Article.html">
			<ul class="information_title">
				<li><p>个人应急贷款的4种方式</p></li>
				<li><p>2018-1-22</p></li>
			</ul>
			<div>
			     <ul class="next_pic">
			     	<li><img src="@/assets/img/b9079a202b3ab4b0cffdb6f8b14a166c.jpg" width="100%" /></li>
			     	<li><img src="@/assets/img/b9079a202b3ab4b0cffdb6f8b14a166c.jpg" width="100%" /></li>
			     	<li><img src="@/assets/img/b9079a202b3ab4b0cffdb6f8b14a166c.jpg" width="100%" /></li>
			     </ul>
			</div>
			</a>
			<ul class="information_function">
				<li><i class="iconfont">&#xe613;</i><span>分享</span></li>
				<li><i class="iconfont">&#xe7bf;</i><span>评论</span></li>
				<li><i class="iconfont">&#xe647;</i><span>886</span></li>
			</ul>
		</div>
		<div style="height: 1rem;"></div>
		<!--底部-->
		<div class="foot">
			<ul>
				<li><a href="#"><i class="iconfont">&#xe67e;</i><p>首页</p></a></li>
				<li><a><i class="iconfont">&#xe615;</i><p>工具</p></a></li>
				<li><a href="Stewardship.html"><i class="iconfont">&#xe619;</i><p>卡管家</p></a></li>
				<li><a href="my.html"><i class="iconfont">&#xe62d;</i><p>我的</p></a></li>
			</ul>
		</div>
	</body>
</template>

<script>
import { Swiper } from 'vux'
export default {
	components: {
		Swiper
	},
	data() {
		return {
			baseList: [{
			  url: 'javascript:',
			  img: '@/assets/img/b5064d252047488b9cf89933a46f606f.jpg ',
			}, {
			  url: 'javascript:',
			  img: '@/assets/img/81b9bb9ecb2c90e2afbe35e949a5e3a5.jpg',
			}, {
			  url: 'javascript:',
			  img: '@/assets/img/b5064d252047488b9cf89933a46f606f.jpg',
			  fallbackImg: 'https://static.vux.li/demo/3.jpg'
			}]
		}
	}
}
	
</script>

<style>
.custom-bottom {
	height: 1rem;
}
</style>
